<template>
  <div class="line-wrapper">
    <canvas id="line" ref="canvas" :width="customWIdth" :height="customHeight"></canvas>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, defineProps, withDefaults, reactive } from "vue";
interface Props {
  customWIdth?: number;
  customHeight?: number;
}

withDefaults(defineProps<Props>(), {
  customWIdth: 600,
  customHeight: 600,
});
const canvas = ref();
const ctx = ref();
const width = ref(0);
const height = ref(0);
const widthHalf = ref(0);
const heightHalf = ref(0);
// X轴
const XAxisColor = ref("#000000");
const XAxisLineWidth = ref(5);
const XAxisWidth = ref(0);

// Y轴
const YAxisColor = ref("#000000");
const YAxisLineWidth = ref(5);
const YAxisHeight = ref(0);

const YAxisLabelCount = ref(10);
const YAxisLabelHeight = ref(0);
// 开始绘制位置
const translateXY = ref<number[]>([]);

const lineColor = ref("red");
const lineWidth = ref(2);
const tooltipTextColor = ref("black");

onMounted(() => {
  initCanvas();
  initPosition();
  initSkeleton();
});

const initCanvas = () => {
  canvas.value.setAttribute(
    "width",
    document.body.clientWidth || document.documentElement.clientWidth
  );
  ctx.value = canvas.value.getContext("2d");
  width.value = canvas.value.clientWidth;
  height.value = canvas.value.clientHeight;
  widthHalf.value = width.value / 2;
  heightHalf.value = height.value / 2;
  XAxisWidth.value = width.value * 0.8;

  YAxisHeight.value = height.value * 0.8;
  YAxisLabelHeight.value = YAxisHeight.value / YAxisLabelCount.value;
  translateXY.value = [width.value * 0.15, height.value - 50];
};
const initPosition = () => {
  ctx.value.beginPath();
  ctx.value.translate(...translateXY.value);
};
const initSkeleton = () => {
  console.log();
  
}
</script>

<style scoped>
.line-wrapper {
  width: 100%;
  height: 100%;
}
</style>
